import React, { useState } from 'react'

// import {stuList} from '../../services/students'
// import { useNavigate } from "react-router-dom";

export default function (props) {
    const {updateStuObj} = props;
    const changeGender = (e) => {
        console.log(e.target.value)
        props.setUpdateStuObj({...props.updateStuObj,gender:e.target.value})
    }
    const update = () => {
        props.toUpdate(updateStuObj)
        props.setUpdateStuObj({name:'',age:'',gender:''})
    }
    return (
        <div>
            <p>
                <label>姓名:&nbsp;</label>
                <input type='text'  style={{width:'250px'}}  value={updateStuObj.name} onChange={(e) => {props.setUpdateStuObj({...props.updateStuObj,name:e.target.value})}}/>
            </p>
            <p>
                <label>年龄:&nbsp;</label>
                <input type='text'  style={{width:'250px'}}  value={updateStuObj.age} onChange={(e) => {props.setUpdateStuObj({...props.updateStuObj,age:e.target.value})}}/>
            </p>
            <p>
                <label forhtml='gender'>性别:&nbsp;&nbsp;&nbsp;</label>
                男&nbsp;&nbsp;<input type="radio" name="gender" value='male' checked={updateStuObj.gender==='male'?true:false} onChange={changeGender}/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                女&nbsp;&nbsp;<input type="radio" name="gender" value='female'  checked={updateStuObj.gender==='female'?true:false} onChange={changeGender}/>
            </p>
            <button style={{ width: '100%', height: '30px', border: '2px solid skyblue' }} onClick={update}>更新学生</button>
        </div>
    )

}
